<template>
  <view
    class="v-input-clear"
    @click="$emit('click')"
  >
    <wd-icon
      v-if="value"
      name="close"
      :size="size"
      :color="color"
    />
    <view
      v-else
      class="holder"
      :style="{ height: size, width: size }"
    />
  </view>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    value: string | undefined;
    size?: string;
    color?: string;
  }>(),
  {
    size: '24rpx',
    color: '#999'
  }
);

defineEmits<{
  click: [];
}>();
</script>

<style lang="scss" scoped>
.v-input-clear {
  padding: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
